<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/comm/list.css" media="all">

    <script type="application/javascript" src="/static/js/jQuery.js"></script>
    <script type="application/javascript" src="/static/layui/layui.js"></script>
    <script type="application/javascript" src="/static/js/login.js"></script>
    <script type="application/javascript" src="/static/js/utils.js"></script>
    <script type="application/javascript" th:inline="none">
        $(function(){
            var userName = getCookie("userName");
            $("#currentUserName").text(userName);
        });

        layui.use(["table","laydate"], function () {
            var table = layui.table;
            var laydate = layui.laydate;

            table.render({
                elem: '#todayWorkingList'
                ,url: '/customerRest/list-today' //数据接口
                ,page: false //开启分页
                ,defaultToolbar:['filter']
                ,toolbar: '#toolbar_today'
                ,cols: [[
                    {field: 'id', title: 'ID', hide:true}
                    ,{field: 'doneTimeEnd', title: '任务结束时间', hide:true}
                    ,{field: 'planTime', title: '计划时间', templet:function(d){
                            return formatDate(d.planTime);
                        }}
                    ,{field: 'plan', title: '计划事项', width: '30%'}
                    ,{field: 'doneTime', title: '完成时间', width: '20%', align: 'center', templet:function(d){
                        return '<input type="text" class="layui-input" id="'+d.id+'"' +
                            'value="'+formatTime(d.doneTime)+ ' - ' + formatTime(d.doneTimeEnd) + '" >';
                        }}
                    ,{field: 'context', title: '实际情况', width: '40%', edit: 'text'}
                ]]
                ,done:function(res, curr, count){
                    //加载成功之后渲染所有日期控件
                    var list = res.data;
                    for (var i = 0; i < list.length; i++) {
                        var id = list[i].id;
                        laydate.render({
                            elem: document.getElementById(id)
                            ,type: 'time'
                            ,format: 'HH:mm'
                            ,range: true
                            ,done: function(value, date, endDate){
                                //日期框选择成功之后执行
                                var selectTime = formatLayDateTime(date);
                                var selectTimeEnd = formatLayDateTime(endDate);
                                updateValue(this.elem[0].id, ["doneTime","doneTimeEnd"],[selectTime,selectTimeEnd]);
                            }
                        });
                    }
                }
            });

            // //监听行单击事件
            // table.on('row(todayWorking)', function(obj){
            // });

            //监听单元格编辑
            table.on('edit(todayWorking)', function(obj){
                updateValue(obj.data.id, [obj.field], [obj.value]);
            });

            table.on('toolbar(todayWorking)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'addTodayPlan':
                        //点击加号按钮时，新添一行
                        $.post("/customerRest/save", {"time" : "today"},function(r){
                            if(r.code === 0){
                                table.reload('todayWorkingList');
                                layer.msg("添加成功");
                            }else if(r.code === 1){
                                layer.msg("添加失败");
                            }else{
                                layer.msg(r.msg);
                            }
                        });
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选');
                        break;
                }
            });


            //明日计划
            table.render({
                elem: '#tomorrowWorkingList'
                ,url: '/customerRest/list-tomorrow' //数据接口
                ,page: false //开启分页
                ,defaultToolbar:['filter']
                ,toolbar: '#toolbar_tomorrow'
                ,cols: [[
                    {field: 'id', title: 'ID', hide:true}
                    ,{field: 'planTime', title: '计划时间', templet:function(d){
                            return formatDate(d.planTime);
                        }}
                    ,{field: 'plan', title: '计划事项', edit: 'text'}
                ]]
            });

            //监听单元格编辑
            table.on('edit(tomorrowWorking)', function(obj){
                updateValue(obj.data.id, obj.field, obj.value);
            });

            table.on('toolbar(tomorrowWorking)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'addTomorrowPlan':
                        //点击加号按钮时，新添一行
                        $.post("/customerRest/save", {"time" : "tomorrow"},function(r){
                            if(r.code === 0){
                                table.reload('tomorrowWorkingList');
                                layer.msg("添加新计划");
                            }else if(r.code === 1){
                                layer.msg("添加失败");
                            }else{
                                layer.msg(r.msg);
                            }
                        });
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选');
                        break;
                }
            });

            //----------------方法----------------------

            function updateValue(id, eml, val){
                var param = {};
                param.id = id;

                $.each(eml,function(k,v){
                    switch (v) {
                        case "doneTime" :
                            param.doneTime = val[k];
                            break;
                        case "doneTimeEnd" :
                            param.doneTimeEnd = val[k];
                            break;
                        case "context" :
                            param.context = val[k];
                            break;
                        case "plan" :
                            param.plan = val[k];
                            break;
                    }
                });

                $.get("/customerRest/edit",param, function (data) {
                    layer.msg(data.msg);
                });
            }
        });
    </script>
</head>
<body>
    <script type="text/html" id="toolbar_today">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="addTodayPlan">添加今日事项</button>
        </div>
    </script>
    <script type="text/html" id="toolbar_tomorrow">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="addTomorrowPlan">添加明日计划</button>
        </div>
    </script>
    <div class="listBody">
        <div class="listTile">
            <div class="welcome">
                欢迎使用
            </div>
            <div class="loginUser">
                当前登录:<span id="currentUserName"></span>
            </div>
        </div>
        <div class="listContext">
            <table id="todayWorkingList" lay-filter="todayWorking" lay-data="{id: 'todayWorkingTableId'}"></table>
        </div>
        <div class="listContext">
            <table id="tomorrowWorkingList" lay-filter="tomorrowWorking" lay-data="{id: 'tomorrowWorkingTableId'}"></table>
        </div>
    </div>


</body>
</html>